<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    <title>我的作品 | Xiaoming&#39;s Blog | 一入前端深似海，从此妹子是路人。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="白小明, Web前端开发, 个人博客, 前端博客, html, html5, css, css3, JavaScript, js, Node.js, es5, es6, canvas, Angular.js, Vue.js, React.js, div, style, hexo, hexo theme, material design">
    <meta name="description" content="Works">
<meta name="keywords" content="白小明, Web前端开发, 个人博客, 前端博客, html, html5, css, css3, JavaScript, js, Node.js, es5, es6, canvas, Angular.js, Vue.js, React.js, div, style, hexo, hexo theme, material design">
<meta property="og:type" content="website">
<meta property="og:title" content="我的作品">
<meta property="og:url" content="http://www.lovebxm.com/hand-peace-o/index.html">
<meta property="og:site_name" content="Xiaoming&#39;s Blog">
<meta property="og:description" content="Works">
<meta property="og:updated_time" content="2017-07-03T10:46:52.046Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="我的作品">
<meta name="twitter:description" content="Works">
    
        <link rel="alternate" type="application/atom+xml" title="Xiaoming&#39;s Blog" href="/atom.xml">
    
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>
</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu"  >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/brand.jpg)">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">白小明</h5>
          <a href="mailto:80583600@qq.com" title="80583600@qq.com" class="mail">80583600@qq.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect active">
              <a href="/hand-peace-o"  >
                <i class="icon icon-lg icon-hand-peace-o"></i>
                作品
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/bxm0927" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/user"  >
                <i class="icon icon-lg icon-user"></i>
                关于我
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/404.html"  >
                <i class="icon icon-lg icon-link"></i>
                404 测试
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">我的作品</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header page-header">

    <div class="container fade-scale">
        <h1 class="title">我的作品</h1>
        <h5 class="subtitle">
            
                Works
            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    <article class="page-article fade" itemprop="blogPage">
        <div class="post-content page-content" id="page-content" itemprop="pageContent">
            <h2 id="响应式理财网站"><a href="#响应式理财网站" class="headerlink" title="响应式理财网站"></a>响应式理财网站</h2><figure><br><br>👉 GitHub: <a href="https://github.com/bxm0927/licaibao-responsive" target="_blank" rel="external">https://github.com/bxm0927/licaibao-responsive</a><br><br>👉 项目演示地址: <a href="http://www.lovebxm.com/licaibao-responsive/src/">http://www.lovebxm.com/licaibao-responsive/src/</a><br><br><strong>项目简介</strong><br><br>这是一个响应式的理财网站，方法是CSS 媒体查询，可以适配电脑、平板、手机等多终端不同尺寸的设备。是以一个实际上线的互联网金融网站为案例，实际演示响应式网页的成型过程。<br><br><strong>技术栈</strong><br><br>- HTML/CSS/JS：实现基本的HTML结构；渐进增强 or 优雅降级，使用了CSS Resets、相对单位rem、媒体查询、清除浮动等CSS技巧；使用了响应式轮播图插件 OwlCarousel2，以及解决了一些浏览器兼容性问题。<br>- Node.js：同步异步编程方式的区别，包管理器NPM的使用，package.json 如何配置，http-server 的使用等知识。<br>- Gulp：自动化构建工具，使用Gulp进行自动化打包发布。<br><br><strong>收获</strong><br><br>1. 对常见的响应式布局方法（CSS Media Query、Flex弹性布局、Bootstrap栅格系统）有了更深的认识；<br>2. 能够快速掌握一个简易JS插件（库）；<br>3. 熟悉了Node.js的基本知识、包管理器npm的使用、httpserver的使用；<br>4. 熟悉了自动化构建工具 Gulp 的基本流程。<br><br></figure>

<h2 id="Vue-js-高仿饿了么外卖-APP"><a href="#Vue-js-高仿饿了么外卖-APP" class="headerlink" title="Vue.js 高仿饿了么外卖 APP"></a>Vue.js 高仿饿了么外卖 APP</h2><figure><br><br>👉 GitHub: <a href="https://github.com/bxm0927/elelmeApp" target="_blank" rel="external">https://github.com/bxm0927/elelmeApp</a><br><br>👉 项目演示地址: <a href="https://bxm0927.github.io/elelmeApp/dist/?id=123#/goods" target="_blank" rel="external">https://bxm0927.github.io/elelmeApp/dist/?id=123#/goods</a><br><br><strong>项目简介</strong><br><br>这是一个用 Vue.js 制作的高仿饿了么外卖的单页Web应用。使用 Vue.js + ES6 + webpack + Sass等前端最新最热的技术，采用组件化、模块化的开发方式。提取外卖App最核心的模块（商品、评论、商家），完全高仿饿了么外卖APP。<br><br><strong>技术栈</strong><br><br>- HTML/CSS/JS：使用 HTML 5 localStorage 存储本地数据；使用 Stylus 和 Sass 预编译 CSS、使用了自己编写的 reset.css 来统一页面初始样式、移动端设备像素比、媒体查询、flex弹性布局、CSS Sticky footers、iconFont 图标字体等；通用 eslint 做 js 代码校验<br>- better-scroll：js 插件，实现平滑滚动效果<br>- Vue.js：一个前端 MVVM 框架，主要思想是双向数据绑定和组件化<br>- vue-cli：Vue.js 官方提供的一个脚手架工具，里面提供的一些基础的代码结构<br>- vue-router：用 Vue.js + vue-router 创建单页应用，是将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们<br>- vue-resource：这是一个 Vue.js 的插件，提供了使用 XMLHttpRequest 或 JSONP 进行Web请求和处理响应的服务<br>- webpack：打包 Vue.js 项目代码资源文件<br>- Node.js：使用 express 构建一个本地 HTTP server 来调试 Vue 项目<br><br><strong>收获</strong><br><br>1. 了解了一个项目完整的开发流程<br>2. 学会了组件化、模块化的开发模式，将多次重复开发的样式抽象成 Vue 组件<br>3. 学会使用 stylus、sass 预编译模块化的 CSS<br>4. 学会前后端分离开发，mock 假的 json 后端数据存储在本地<br>5. 掌握了使用 Vue-cli 脚手架初始化 Vue.js 项目<br>6. 学会了使用 vue-router 将组件映射到路由，进行页面路由切换<br>7. 学会了使用 vue-resource 进行 HTTP 请求获取数据<br>8. 了解 webpack 的打包原理、学会 ES6 + eslint 的开发方式、学会如何在Vue.js框架里和第三方JS插件交互<br><br></figure>

<h2 id="彩票项目（11选5）"><a href="#彩票项目（11选5）" class="headerlink" title="彩票项目（11选5）"></a>彩票项目（11选5）</h2><figure><br><br>👉 GitHub: <a href="https://github.com/bxm0927/lottery" target="_blank" rel="external">https://github.com/bxm0927/lottery</a><br><br>👉 项目演示地址: <a href="http://es6lottery.t.imooc.io" target="_blank" rel="external">http://es6lottery.t.imooc.io</a><br><br><strong>项目简介</strong><br><br>这一个彩票项目（11选5），大量使用 ES6 原生语法，也是为了学习 ES6 而实战的项目。本案例通过业务需求分析、项目架构思考、需求划分模块、前端代码编写、部署服务器端程序、前后端接口联调测试、部署上线几个步骤，真实还原实际业务开发流程。<br><br>本项目主要功能模块：期号自动更新、倒计时、开售状态、玩法切换、自主选号、随机选号、金额计算、奖金预测等。<br><br><strong>技术栈</strong><br><br>- Sass(Scss): 预编译 CSS，方便快捷<br>- ES6: 这是以后的趋势，let、const、class、箭头函数、Set Map 数据结构、Promise 等新特性十分实用<br>- Gulp: 编写 gulp 脚本完成ES6的自动编译、打包、文件监听、浏览器热更新、模板自动更新、服务热启动等<br>- Babel: gulp 的一个插件，实现了 ES6 转 ES5<br>- Webpack: 自动编译<br>- Express.js: 搭建服务器<br>- mockjs: 模拟后端数据，与前端实现数据对接<br><br><strong>收获</strong><br><br>1. 初步掌握了 ES6<br>2. 领悟了模块化编程的好处<br>3. 加深对 gulp 自动化配置的掌握<br>4. 了解了一个项目完整的开发流程<br><br></figure>

<p>未完待续……</p>

        </div>

        
        <div class="card page-about-me flex-row">
            <a href="/" class="avatar waves-effect waves-circle waves-light"><img src="/img/avatar.jpg"></a>
            <div class="content flex-col">
                <p><strong>白小明</strong></p>
                <p><em>一入前端深似海，从此妹子是路人。</em></p>
                <p>当一个人找不到出路的时候，最好的办法就是将当前能做好的事情做到极致，做到无人能及。</p>
            </div>

            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://www.lovebxm.com/hand-peace-o/&title=《我的作品》 — Xiaoming's Blog&pic=http://www.lovebxm.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://www.lovebxm.com/hand-peace-o/&title=《我的作品》 — Xiaoming's Blog&source=白小明的博客 - 我不是为了输赢，我就是认真" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://www.lovebxm.com/hand-peace-o/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《我的作品》 — Xiaoming's Blog&url=http://www.lovebxm.com/hand-peace-o/&via=http://www.lovebxm.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://www.lovebxm.com/hand-peace-o/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
        

        


        

    </article>
    

</div>

        <!-- <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p>
            <span>Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a></span>
            <span>白小明 &copy; 2017</span>
        </p>
    </div>
</footer> -->

<footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
            <span>白小明 &copy; 2017</span>
        </p>
    </div>
    <div class="bottom">
        <p>
        <span>
        <a target="_blank" href="mailto:80583600@qq.com" style="border-bottom:none">
        <img src="" alt="E-mail 联系" style="width:20px;height:20px;border:none;">
        </a>
        </span>

        <span>
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=80583600&site=qq&menu=yes" style="border-bottom:none">
        <img src="" title="QQ 联系" style="width:22px;height:22px;border:none;"></a>
        </span>

        <span>
        <a target="_blank" href="https://github.com/bxm0927" style="border-bottom:none">
        <img src="" alt="GitHub microzz" title="GitHub 联系" style="width:19px;height:19px;border:none;"></a>
        </span>
        </p>
    </div>
</footer>




    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://www.lovebxm.com/hand-peace-o/&title=《我的作品》 — Xiaoming's Blog&pic=http://www.lovebxm.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://www.lovebxm.com/hand-peace-o/&title=《我的作品》 — Xiaoming's Blog&source=白小明的博客 - 我不是为了输赢，我就是认真" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://www.lovebxm.com/hand-peace-o/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《我的作品》 — Xiaoming's Blog&url=http://www.lovebxm.com/hand-peace-o/&via=http://www.lovebxm.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://www.lovebxm.com/hand-peace-o/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: false };



</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '死鬼去哪里了！';
            clearTimeout(titleTime);
        } else {
            document.title = '(つェ⊂)咦!又好了!';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
